import CommonTable from "@/components/table/index.jsx"
import { Input, Button } from "antd"
import { SearchOutlined } from "@ant-design/icons"
import { useState } from "react"
import { http } from "@/common"
import "./index.less"
import { useEffect } from "react"
import { getColumns } from "./model"

const columns = getColumns()

export default function StroeManage() {
  const [data, setData] = useState([])
  const [condition, setCondition] = useState({
    search: "",
    pageNum: 1,
    pageSize: 10,
  })
  const [pageTotal, setPageTotal] = useState(0)

  function onSerchInput(e) {
    setCondition({ ...condition, search: e.target.value })
  }

  async function doSearch() {
    const res = await http({
      method: "post",
      url: "/api/store/pageList",
      data: condition,
    })
    setData(() => {
      setPageTotal(res.data.total)
      return res.data.records
    })
  }

  function onPageChange(pageNum, pageSize) {
    setCondition({ ...condition, pageNum, pageSize })
    doSearch()
  }

  useEffect(() => {
    doSearch()
  }, [])

  return (
    <CommonTable
      data={data}
      columns={columns}
      pageInfo={{
        pageNum: condition.pageNum,
        pageSize: condition.pageSize,
        total: pageTotal,
      }}
      onPageChange={onPageChange}
      headerComponent={
        <div className="store-action">
          <Input value={condition.search} onInput={onSerchInput}></Input>
          <Button onClick={doSearch} icon={<SearchOutlined />} type="primary">
            搜索
          </Button>
        </div>
      }
    ></CommonTable>
  )
}
